<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { markRaw, onBeforeUnmount, onMounted, ref } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据

// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(echarts.init(seller_ref.value, 'chalk'))
  const initOption = {}
  chartInstance.value.setOption(initOption)
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/rank.json').then((res) => {
    allData.value = res.data
    updateChart()
  })
}
//更新图表
const updateChart = () => {
  const dataOption = {}
  chartInstance.value.setOption(dataOption)
}

// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  //   let titleFontSize = (seller_ref.value.offsetWidth / 100) * 5
  //分辨率大小相关的配置项
  const adapterOption = {}
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  window.onresize = null
})
</script>

<style lang="scss" scoped></style>
